<template>
  <d2-container :filename="filename">
  <el-form :inline="true" :model="form" :rules="rules" ref="form" size="mini" style="margin-bottom: -18px;">
      <el-form-item label="关键字" prop="key">
        <el-input v-model="form.key" placeholder="关键字" style="width: 100px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFormSubmit">
          <d2-icon name="search" /> 查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleFormReset">
          <d2-icon name="refresh" /> 重置
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleAddItem">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="table"    stripe style="width: 100%">
      <el-table-column prop="con_key" label="键"  :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="con_val" label="值" >
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <el-table-column  label="操作" width="120">
      <template slot-scope="scope">
        <el-button
              type="text"
              size="small"   @click.native.prevent="handleEdit(scope.row)">
              编辑
            </el-button>
      </template>
    </el-table-column>
    </el-table>
    <sx-pagination
      :current-page="page.current"
      :page-size="page.size"
      :total="page.total"
      :page-sizes="[10,20,50,100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin: -10px;"
      @pagination="handlePaginationChange" >
    </sx-pagination>

    <el-dialog :title="EditTitleMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="tempData" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="键" prop="con_key">
          <el-input v-model="tempData.con_key" :disabled="isEdit"/>
        </el-form-item>
        <el-form-item label="值" prop="con_val">
          <el-input v-model="tempData.con_val"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="tempData.remark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="SaveData()">保存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import { GetConfigList, Save } from '@/api/sys/config'
import util from '@/libs/util'
export default {
  // name 值和本页的 $route.name 一致才可以缓存页面
  name: 'sys-log-index',
  components: {
    // 'DemoPageHeader': () => import('./componnets/PageHeader'),
    // 'DemoPageMain': () => import('./componnets/PageMain')
  },
  data () {
    return {
      filename: __filename,
      table: [],
      loading: false,
      page: {
        current: 1,
        size: 20,
        total: 0
      },
      form: {
        key: ''
      },
      rules: {
      },
      // 编辑按钮
      dialogFormVisible: false,
      // 弹窗模式
      dialogStatus: 'create',
      // 弹窗标题
      EditTitleMap: {
        create: '创建',
        update: '编辑',
        view: '查看'
      },
      // 创建表单临时数据
      tempData: {
        con_key: '',
        con_val: '',
        status: 0,
        remark: ''
      }
    }
  },
  computed: {
    isEdit: function () {
      return this.dialogStatus === 'update'
    }
  },
  created () {
    this.$nextTick(() => {
      this.handleFormSubmit()
    })
  },
  methods: {
    handlePaginationChange (val) {
      // val.total = this.page.total
      this.page = val
      this.$nextTick(() => {
        this.handleFormSubmit()
      })
      // this.page.size = val
    },
    handleSubmit (form) {
      this.loading = true
      GetConfigList({
        form,
        page: this.page
      })
        .then(res => {
          this.loading = false
          this.table = res.list
          this.page = res.page
        })
        .catch(err => {
          this.loading = false
          this.$notify({
            title: '数据请求异常'
          })
          console.log('err', err)
        })
    },
    handleFormSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleSubmit(this.form)
        } else {
          this.$notify.error({
            title: '错误',
            message: '表单校验失败'
          })
          return false
        }
      })
    },
    handleFormReset () {
      this.$refs.form.resetFields()
    },
    resetTemp (pid) {
      this.tempData = {
        con_key: '',
        con_val: '',
        status: 0,
        remark: ''
      }
    },
    handleAddItem () {
      this.resetTemp(this.form.parent_id)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 编辑按钮
    handleEdit (data) {
      this.tempData = Object.assign({}, data) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 更新数据
    SaveData () {
      var _t = this
      util.SaveData(Save, _t.tempData, _t, function () {
        _t.dialogFormVisible = false
        _t.handleFormSubmit()
      })
    }
  }
}
</script>
